<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>

<head>
    <title>订单详情</title>
    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/nav.css" />
    <link rel="stylesheet" href="${path}/pet/home/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="${path}/pet/shoppingcart/css/buy_success.css" />
    <!--JS files-->
    <script src="${path}/pet/home/js/jquery.min.js"></script>
</head>

<body>
<!----------- 导航 --------------------------------------------------------------------------->
<nav class="navbar-fixed">
    <div class="container">
        <div class="navigation navigation-main">
            <a href="" class="logo"><img src="${path}/pet/home/assets/images/logo.jpg" alt="" /></a>
            <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>
            <div class="floating-menu">
                <div class="close-menu-wrapper">
                    <span class="close-menu"><i class="icon icon-cross"></i></span>
                </div>
                <ul>
                    <li id="exitlogin1"><a>退出登录</a></li>
                    <li><a href="${path}/home">首页</a></li>
                    <li><a href="${path}/chat">社交<span id="badge"></span></a></li>
                    <li><a href="${path}/chat?role=kf">客服</a></li>
                    <li><a href="${path}/myAccount">我的</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<section class="main-header" style="background-image:url(${path}/pet/home/assets/images/gallery-3.jpg)">
    <header>
        <div class="container">
            <h1 class="h2 title">宠物医疗保险-订单详情</h1>
        </div>
    </header>
</section>

<!----------- 购买成功 --------------------------------------------------------------------------->
<section  style="max-width:1200px;margin:25px auto">
    <section style="margin-top: -95px;">
        <div class="aui-flex aui-flex-context">
            <div class="aui-flex-box">
                <h2 style="display: inline-block;">订单详情</h2>
                <a href="${path}/myOrders"><button>全部订单</button></a>
            </div>
        </div>
        <div>
            <table class="table">
                <caption>宠物保险单</caption>
                <tbody>
                    <tr><td colspan="9" class="zw">投保人</td></tr>
                    <tr>
                        <th>用户名</th>
                        <th>证件类型</th>
                        <th>证件号</th>
                        <th>手机号码</th>
                        <th>身份</th>
                    </tr>
                    <tr id="tb"></tr>
                    <tr><td colspan="9" class="zw">受保人</td></tr>
                    <tr>
                        <th>用户名</th>
                        <th>证件类型</th>
                        <th>证件号</th>
                        <th>手机号码</th>
                        <th>关系</th>
                    </tr>
                    <tr id="sb"></tr>
                    <tr><td colspan="9" class="xx">受保宠物</td></tr>
                    <tr>
                        <th>姓名</th>
                        <th>品种</th>
                        <th>出生日期</th>
                        <th>许可证号码</th>
                        <th>免疫证号码</th>
                    </tr>
                    <tr id="cw"></tr>
                    <tr>
                        <th>颜色</th>
                        <th>性别</th>
                        <th>是否节育</th>
                        <th>芯片号</th>
                        <th>主人</th>
                    </tr>
                    <tr id="cw1"></tr>
                    <tr>
                    <tr><td colspan="9" class="xx">所购保险</td></tr>
                    <tr>
                        <th>保险名称</th>
                        <th>保险类型</th>
                        <th>保险描述</th>
                        <th>适用于</th>
                        <th>价格</th>
                    </tr>
                    <tr id="bx"></tr>
                </tbody>
            </table>
        </div>
        <div class="aui-flex-box" id="data_list"></div>
    </section>
</section>
</body>

<script>
    //时间戳转换为时间
    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D+h+m+s;
    }
    $(function() {
        var user="<%=session.getAttribute("user")%>";
        var uid = ${user.id};

        //投保人信息
        var str = "";
        str += '<td>'+ "${user.username}" +'</td>';
        str += '<td>'+ ${user.id} +'</td>';
        str += '<td>'+ "${user.sex}" +'</td>';
        str += '<td>'+ "${user.phone}" +'</td>';
        str += '<td>'+ "${user.role}" +'</td>';
        $('#tb').html(str);

        $("#exitlogin1").click(function(){
            var username = "${user.username}";
            $.ajax({
                type: 'POST',
                url: '/user/logout',
                dataType: "json",
                data: {username:username},
                error: function () {
                    console.log("失败");
                },
                success: function (data) {
                    alert("已退出账号，如有需要，请重新登录");
                    window.location.href = '${path}/home';
                }
            });
        });

        //轮询信息
        $.ajax({
            url: '/message/longSearch',
            data: {uid:uid},
            dataType:'json',
            type: 'POST',
            success: function (result) {
                var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                $("#badge").html(num);
            }
        });
        setInterval(function(){
            $.ajax({
                url: '/message/longSearch',
                data: {uid:uid},
                dataType:'json',
                type: 'POST',
                success: function (result) {
                    var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                    $("#badge").html(num);
                }
            });
        }, 5000);
    });

    //根据订单id获取订单信息
    var qdata ={
        billId:${param.billID}
    };
    $.ajax({
        type: 'POST',
        url: '/bill/selectByBillId',
        dataType : "json",
        data:qdata,
        error: function () {
            console.log("失败");
        },
        success: function (result) {
            console.log(result.msg);
            console.log(result.msg.insured);
            console.log(result.msg.item);
            console.log(result.msg.pet);
            var str1 = "";
            str1 += '<td>'+ result.msg.insured.name +'</td>';
            str1 += '<td>'+ result.msg.insured.idType +'</td>';
            str1 += '<td>'+ result.msg.insured.identity +'</td>';
            str1 += '<td>'+ result.msg.insured.phone +'</td>';
            str1 += '<td>'+ result.msg.insured.relation +'</td>';
            $('#sb').html(str1);
            var str2 = "";
            str2 += '<td>'+ result.msg.pet.name +'</td>';
            str2 += '<td>'+ result.msg.pet.species +'</td>';
            str2 += '<td>'+ result.msg.pet.birthday +'</td>';
            str2 += '<td>'+ result.msg.pet.lisence +'</td>';
            str2 += '<td>'+ result.msg.pet.immune +'</td>';
            $('#cw').html(str2);
            var str3 = "";
            str3 += '<td>'+ result.msg.pet.color +'</td>';
            str3 += '<td>'+ result.msg.pet.sex +'</td>';
            str3 += '<td>'+ result.msg.pet.birthControl +'</td>';
            str3 += '<td>'+ result.msg.pet.chip +'</td>';
            str3 += '<td>'+ result.msg.insured.name +'</td>';
            $('#cw1').html(str3);
            var str4 = "";
            str4 += '<td>'+ result.msg.item.itemName +'</td>';
            str4 += '<td>'+ result.msg.item.type +'</td>';
            str4 += '<td>'+ result.msg.item.description +'</td>';
            str4 += '<td>'+ result.msg.item.subject +'</td>';
            str4 += '<td>'+ result.msg.item.price +'</td>';
            $('#bx').html(str4);
            var str5 = "";
            str5 += '<h4 style="font-size: 1.2em;">下单时间: <em>'+ timestampToTime(result.msg.createDate) +'</em></h4>';
            str5 += '<h4 style="font-size: 1.2em;">使用时间: <em>'+ timestampToTime(result.msg.useDate) +'</em></h4>';
            str5 += '<h4 style="font-size: 1.2em;">到期时间: <em>'+ timestampToTime(result.msg.expireDate) +'</em></h4>';
            $('#data_list').html(str5);
        }
    });
</script>


<style>
    .aui-flex-box p {
        padding-bottom: 0rem;
    }
    .aui-flex-box {
        font-size: 1rem;
        color: #999;
        margin-right: 10px;
    }
    .list{
        margin-left: 30px;
    }
    #badge {
        padding: 2px 5px;  /* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 */
        line-height: 20px;
        text-align: center;
        background-color: red;
        color: white;
        font-size: 12px;
        font-weight: 700;
        border-radius: 50%;
        /*position: relative;*/
        /*bottom: 45px;*/
        /*left: -20px;*/
    }
    /*给表格设置属性*/
    .table {
        /*width: 700px;*/
        border-collapse: collapse;
        width: 100%;
        background: #f5f5f5;
    }

    /*设置表格的td,th */
    .table td,
    th {
        border: 1px solid black;
        width: 20%;
        text-align: center;
    }

    .sj {
        width: 70px;
        text-align: center;
        /*字体居中*/
    }

    /*逗号选择器*/
    .sw,
    .xw,
    .zw,
    .xx,
    .ws,
    .ws {
        text-align: center;
    }

    caption {
        padding-top: .75rem;
        padding-bottom: .75rem;
        color: #6c757d;
        background: #f5f5f5;
        text-align: center;
        caption-side: top;
        font-size: 20px;
    }
</style>

</html>